<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:42:39
-->
<template>
  <!-- 2.设置图标容器 容纳容器 -->
  <!-- 如何在vue中获取dom节点：设置ref属性 -->
  <div ref="root" style="height:150px">

  </div>
</template>
<script>
  //1.引入组件库 package.json已经引入完成了
  // 从g2plot对象中引入了Line折线图
  import {Line} from '@antv/g2plot'
  export default {
    data(){
      return{

      };
    },
    //页面dom节点创建完毕 但是没有挂载--不能获取到dom节点
    created(){},
    //在onMounted之后执行 页面dom节点创建完毕 挂载完毕--才能获取到dom节点
    mounted(){
      this.initCharts();
    },
    methods: {
      //封装折线图方法
      initCharts() {
        //3.创建一个图表实例
        //使用 this.$refs['root'] 进行获取root节点 ref='root'
        let line = new Line(this.$refs['root'], {
            //等价于全局声明data对象，并把它赋值给data 等价于直接写data
            data: [{
                month: '3月',
                value: 2
            }, {
                month: '4月',
                value: 4
            }, {
                month: '5月',
                value: 3.5
            }, {
                month: '6月',
                value: 5
            }, {
                month: '7月',
                value: 3
            }],
          xField:'month',
          yField:'value',
          color:"cyan",
          tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        xAxis: {
          label: {
            rotate: -45,
            offset: 25,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        });
        //4.渲染
        line.render();
      }
    }
  }
</script>
<style lang="scss">

</style>